<!-- main -->
<template>
  <div>
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix" style="border-bottom: none;">
        <el-button class="leftBtn" type="warning" icon="el-icon-circle-plus-outline" @click="dialogVisible=true">新增</el-button>
        <el-button v-show="isShow" class="leftBtn" style="color: black" type="warning" plain>工单配置</el-button>
      </div>
      <el-table :data="list">
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="工单编号" prop="taskCode" />
        <el-table-column label="设备编号" prop="innerCode" />
        <el-table-column label="工单类型" prop="taskType.typeName" />
        <el-table-column label="工单方式" prop="createType">
          <template #default="scope">
            {{ typeList[+scope.row.createType] }}
          </template>
        </el-table-column>
        <el-table-column label="工单状态" prop="taskStatus">
          <template #default="scope">
            {{ statusList[+scope.row.taskStatus] }}
          </template>
        </el-table-column>
        <el-table-column :label="title" prop="userName" />
        <!-- <el-table-column v-else label="运维人员" prop="userName" /> -->
        <el-table-column label="创建日期" prop="createTime" width="200">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="text">查看详情</el-button>
        </el-table-column>
      </el-table>
      <TabfooterBtn
        :params="params"
        :total-count="totalCount"
        :total-page="totalPage"
        @nextPageFn="pageFn"
        @prevPageFn="pageFn"
      />
    </el-card>
    <Dialog
      :dialog-visible="dialogVisible"
      :params="params"
      :title="title"
      @close="closeFn"
      @add="addFn"
    />
  </div>
</template>

<script>
import { taskSearch, allTaskStatus } from '@/api'
import dayjs from 'dayjs'
import Dialog from './dialog.vue'
export default {
  components: {
    Dialog
  },
  props: {
    params: {
      type: Object,
      default: null
    },
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      statusList: {
        1: '',
        2: '',
        3: '',
        4: ''
      },
      typeList: {
        0: '自动',
        1: '手动'
      },
      totalCount: 0,
      totalPage: 0
    }
  },
  computed: {
    title() {
      return this.params.isRepair ? '运维人员' : '运营人员'
    }
  },
  async created() {
    this.fetchTaskList(this.params)
    const res = await allTaskStatus()
    res.data.forEach(item => {
      this.statusList[item.statusId] = item.statusName
    })
    // console.log(this.statusList)
  },
  methods: {
    // 渲染表格数据
    async fetchTaskList(obj) {
      const { data } = await taskSearch(obj)
      // console.log(res)
      this.list = data.currentPageRecords
      // console.log(this.list)
      this.totalCount = +data.totalCount
      this.totalPage = +data.totalPage
    },
    // 搜索刷新页面
    searchUpdate(obj) {
      this.fetchTaskList(obj)
    },
    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY.MM.DD HH:mm:ss')
    },
    // 下一页
    pageFn(val) {
      // console.log(val)
      this.params.pageIndex = val
      this.fetchTaskList()
    },
    // 弹出框
    handleClose(done) {

    },
    // 关闭弹出框
    closeFn() {
      this.dialogVisible = false
    },
    // 新增页面渲染
    addFn() {
      this.params.pageIndex = this.totalPage
      this.fetchTaskList(this.params)
    }

  }
}

</script>
<style lang='scss' scoped>
.clearfix {

  .leftBtn {
    float: left;
    padding: 3px 0;
    height: 40px;
    width: 100px;
  }
}
::v-deep .el-card__header {
    border-bottom: none;
}

</style>
